<template>
	<view class="content">
		<u-icon name="checkmark-circle-fill" size="250" color="#ff5555" style="margin-top: 100upx;"></u-icon>
		<text class="tit">支付成功</text>
		<text class="tit2">邀请好友拼团赚佣金</text>
		<view style="width: 100%;display: flex;justify-content: center;margin: 50upx 0 0;">
			<view v-if="qrcode1" style="width: 50%;height: 350upx;border-radius: 20upx;">
				<image @click="previewImage(qrcode1)" style="width: 100%;height: 350upx;" :src="qrcode1" mode="aspectFit"></image>
			</view>
			<view v-if="qrcode2" style="width: 50%;height: 350upx;border-radius: 20upx;">
				<image @click="previewImage(qrcode2)" style="width: 100%;height: 350upx;" :src="qrcode2" mode="aspectFit"></image>
			</view>
		</view>
		<view v-if="qrcode1||qrcode2" style="margin: 0upx 0 50upx;color: 999;font-size: 24upx;">
			点击图片长按保存后可以联系我们哦
		</view>
		<view class="btn-group">
			<button open-type="share" class="mix-btn">分享好友</button>
			<navigator url="/pages/order/order?state=0" open-type="redirect" class="mix-btn hollow">查看订单</navigator>
			<navigator url="/pages/index/index" open-type="redirect" class="mix-btn hollow">返回首页</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		onShareAppMessage(res) {
			if (res.from === 'button') {// 来自页面内分享按钮
			}
			return {
				imageUrl: this.goods_images[0],
				title: this.res.shorttitle,
				path: '/pages/index/index?goodsid=' + this.goodsid  + '&pid=' + this.pid + '&pids=' + this.pids
			}
		},
		data() {
			return {
				pid: 0,
				pids: 0,
				goodsid: '422',
				goods_images: [],
				res: {},
				qrcode1 : '',
				qrcode2 : '',
			}
		},
		onLoad (e) {
			console.log(e)
			if (e.qrcode1) {
				this.qrcode1 = e.qrcode1
			}
			if (e.qrcode2) {
				this.qrcode2 = e.qrcode2
			}
			uni.getStorage({
				key: 'pid',
				success: (res) => {
					this.pid = res.data
				},
			});
			uni.getStorage({
				key: 'pids',
				success: (res) => {
					this.pids = res.data
				},
			});
			uni.getStorage({
				key: 'goodsid',
				success: (res) => {
					this.goodsid = res.data
				},
			});
			setTimeout(()=>{
				this.setAjax()
			},500)
		},
		methods: {
			setAjax () {
				uni.request({
					url: 'https://www.xiaonengxinxi.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=goods.detail&id=' + this.goodsid +'&app=1',
					method: 'POST',
					data: {
						'openid':this.openid,
					},
					header:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					success: (res) => {
						this.res = res.data
						 
						this.goods_images[0] = res.data.thumb // 添加默认启动轮播图
						// 轮播图对象转数组
						for (let i in res.data.thumbs) {
							this.goods_images[i] = res.data.thumbs[i]
						}
					}
				})
				uni.hideLoading()
			},
			previewImage(Urls){
				uni.previewImage({
						urls: [Urls],
						longPressActions: {
								itemList: ['发送给朋友', '保存图片', '收藏'],
								success: function(data) {
										console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
								},
								fail: function(err) {
										console.log(err.errMsg);
								}
						}
				});
			},
		}
	}
</script>

<style lang='scss'>
	button:after {
	  border: none;
	}
	.content{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.success-icon{
		font-size: 160upx;
		color: #fa436a;
		margin-top: 100upx;
	}
	.tit{
		font-size: 38upx;
		color: #303133;
	}
	.tit2{
		font-size: 30upx;
		color: #cccccc;
	}
	.btn-group{
		/* padding-top: 100upx; */
	}
	.mix-btn {
		margin-top: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 600upx;
		height: 80upx;
		/* font-size: $font-lg; */
		color: #fff;
		background-color: #FF5555;
		border-radius: 10upx;
		&.hollow{
			background: #fff;
			color: #303133;
			border: 1px solid #ccc;
		}
	}
</style>
